<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        <!--ul的第一个子元素-->
            ul li:first-child{
                background: #ff79ff;
            }

        <!--ul的最后一个子元素-->
            ul li:last-child{
                background: #b3ffb4;
            }

        /*选择p1：定位到父元素，然后按顺序选择第一个元素
            选择p标签的父级元素，选中父级元素的第一个，并且是当前元素才生效
        */
        p:nth-child(2){
            color: #b3ffb4;
        }

        /*选中父级元素，然后按照类型进行选中*/
        p:nth-of-type(2){
            background: beige;
        }
    </style>


</head>
<body>

    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>

    <ul>
        <li>l1</li>
        <li>l2</li>
        <li>l3</li>

    </ul>

<p>p8</p>

</body>
</html>